<!DOCTYPE html>
<html>

<head>
    <title>个人设置-主页</title>
    <my_css>

    </my_css>
</head>

<body>
<div class="user-profile row">
    <div class="col-sm-offset-1 col-sm-10">
        <!-- PAGE CONTENT BEGINS -->
        <input type="file" name="uploadFile" id="portraitFile" onchange="uploadPortrait()" style="display: none;"/>

            <div class="tabbable">
                <ul class="nav nav-tabs padding-16">
                    <li class="active">
                        <a href="#edit-basic" data-toggle="tab">
                            <i class="green ace-icon fa fa-pencil-square-o bigger-125"></i>
                            基础信息
                        </a>
                    </li>
                    <li>
                        <a href="#edit-password" data-toggle="tab">
                            <i class="blue ace-icon fa fa-key bigger-125"></i>
                            密码
                        </a>
                    </li>
                </ul>

                <div class="tab-content profile-edit-tab-content">
                    <div class="tab-pane in active" id="edit-basic">
                        <form id="profile_form" class="form-horizontal"onsubmit="return false;">
                            <h4 class="header blue bolder smaller">基本信息</h4>
                            <div class="row">
                                <div class="col-xs-12 col-sm-4">
                                    <span class="profile-picture">
                                            <img id="portraitImg" class="editable img-responsive editable-click"
                                                 src="<#if userInfoVO.portraitShowUri??>${userInfoVO.portraitShowUri!}<#else>/assets/images/avatars/user.jpg</#if>"
                                                 width="180" height="200"/>
                                        </span>
                                    <input id="portraitShowUri" name="portraitShowUri" type="hidden" value="${userInfoVO.portraitShowUri!}"/>
                                    <input id="userId" name="userId" type="hidden" value="${userInfoVO.userId!}"/>
                                    <input id="portraitFileId" name="portraitFileId" type="hidden" value="${userInfoVO.portraitFileId!}"/>
                                </div>
                                <div class="vspace-12-sm"></div>
                                <div class="col-xs-12 col-sm-8">
                                    <div class="form-group">
                                        <label for="form-field-username" class="col-sm-3 control-label no-padding-right">姓名</label>
                                        <div class="col-sm-9">
                                            <input type="text" value="${userInfoVO.userRealNm}" name="userRealNm"
                                                   id="form-field-username" >
                                        </div>
                                    </div>
                                    <div class="space-4"></div>
                                    <div class="form-group">
                                        <label for="form-field-email" class="col-sm-3 control-label no-padding-right">邮箱</label>
                                        <div class="col-sm-9">
                                    <span class="input-icon input-icon-right">
                                        <input type="email" value="${userInfoVO.email!}" name="email" id="form-field-email" >
                                        <i class="ace-icon fa fa-envelope"></i>
                                    </span>
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label for="form-field-phone" class="col-sm-3 control-label no-padding-right">电话</label>
                                        <div class="col-sm-9">
                                    <span class="input-icon input-icon-right">
                                        <input type="text" id="form-field-phone" class="input-medium input-mask-phone" value="${userInfoVO.mobileNo!}" name="mobileNo">
                                        <i class="ace-icon fa fa-phone fa-flip-horizontal"></i>
                                    </span>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="button" class="btn btn-info"
                                            onclick="submitProfile()">
                                        <i class="ace-icon fa fa-check bigger-110"></i> save
                                    </button>

                                    &nbsp; &nbsp;
                                    <button type="reset" class="btn">
                                        <i class="ace-icon fa fa-undo bigger-110"></i> reset
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="edit-password">
                        <form id="userPwd_form" class="form-horizontal" onsubmit="return false;">
                            <div class="space-10"></div>
                            <div class="form-group">
                                <label for="newpwd1"
                                       class="col-sm-3 control-label no-padding-right">新密码</label>

                                <div class="col-sm-9">
                                    <input type="password" id="newpwd1" name="newPwd">
                                </div>
                            </div>

                            <div class="space-4"></div>

                            <div class="form-group">
                                <label for="newpwd2" class="col-sm-3 control-label no-padding-right">重复新密码</label>

                                <div class="col-sm-9">
                                    <input type="password" id="newpwd2" name="newPwd2">
                                </div>
                            </div>
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="button" class="btn btn-info" onclick="submitUserPwd()">
                                        <i class="ace-icon fa fa-check bigger-110"></i> save
                                    </button>

                                    &nbsp; &nbsp;
                                    <button type="reset" class="btn">
                                        <i class="ace-icon fa fa-undo bigger-110"></i> reset
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        <!-- PAGE CONTENT ENDS -->
    </div>
</div>
</body>
<my_script>
    <script src="/assets/js/jquery.validate.min.js"></script>
    <script src="/common/js/jquery.validate.default.js"></script>
    <script src="/common/js/common.form.js"></script>
    <script src="/common/js/common.js"></script>
    <script src="/common/js/ajaxfileupload.js"></script>
    <script src="/common/js/bootbox.js"></script>


    <script type="text/javascript">
        jQuery(function($) {
            $("#portraitImg").click(function(){
                $("#upFileId").click();
            });
        });
        function uploadPortrait() {
            uploadLocalFile("portrait");
        }

        function afterUpload(data) {
            if (data.data && data.data != null && data.data != "") {
                $("#portraitImg").attr("src", data.data.fileShowUri);
                $("#portraitShowUri").val(data.data.fileShowUri);
                $("#portraitFileId").val(data.data.id);
            }
        }

        function submitProfile() {
            $.post("${ctlKey}/update",$("#profile_form").serialize(),function(data){
                if(data.success){
                    bootbox.alert("操作成功!",function(){
                        location.reload();
                    });
                }else{
                    bootbox.alert(data.message);
                }
            },"json");
        }

        function submitUserPwd() {
            $.post("${ctlKey}/updatePwd",$("#userPwd_form").serialize(),function(data){
                if(data.success){
                    bootbox.alert("操作成功!",function(){
                        location.reload();
                    });
                }else{
                    bootbox.alert(data.message);
                }
            },"json");
        }
    </script>

</my_script>
</html>